<template>


<!-- 事件修饰符 -->
<!-- .stop 阻止事件冒泡，单击事件将停止传递-->
<!-- 设置之前：先执行子元素，后执行父元素。设置之后：只执行子元素 -->
<div @click="divClick">
    <button @click.stop="bynClick">按钮</button>
</div>
<!-- .prevent 阻止默认行为 -->
<!-- 设置之前：点击按钮就会默认提交。设置之后：停止默认提交的行为 -->
<!-- 这个表单中有个 type=“submit”  的 input ，这就是一个 form 表单默认的提交按钮，点击这个按钮就会产生一个默认的提交表单的行为，
    而这个默认行为会导致跳转页面，所以需要用 e.preventDefault() 来阻止这个行为。不过不用担心，表单还是会正确提交的！ -->
<form action="">
    <input type="submit" value="提交" @click.prevent="submitClick">
</form>
<!-- .once 点击事件最多被触发一次 -->
<button @click.once="onceClick">只触发一次once</button>

<!-- .self看这篇博客 -->
<!-- https://www.cnblogs.com/fanjiawen/p/16435461.html -->
<button @click.self="123"></button>
</template>


<script setup>
import {ref, reactive} from 'vue'


function divClick(){
    console.log('父元素展示');
}
function bynClick(){
    console.log('子元素展示');
}
function submitClick(){
    console.log('提交数据成功');
}
function onceClick(){
    console.log('只触发一次')
}


</script>


